<template>
  <div>
    <div class="search_condition_bar">
      <el-col :span="24" class="warp-breadcrum">
        <!--搜索栏-->
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="用户名">
              <el-input clearable v-model="usernameQry" placeholder="用户名" @change="queryUsersInner"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryUsers">查询</el-button>
              <el-button type="primary" @click="queryUsersInner">刷新</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </div>

    <hr />
    <el-col :span="24" class="toolbar block">
      <!--数据分页
            layout：分页显示的样式
            :page-size：每页显示的条数
            :total：总数
            具体功能查看地址：http://element.eleme.io/#/zh-CN/component/pagination
      -->
      <el-pagination
        layout="total,prev,pager,next,jumper"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-size="pageSize"
        :total="totalElements"
        background
        :hide-on-single-page="false"
        style="text-align: center;"
      ></el-pagination>
    </el-col>
    <div class="search_result_list">
      <el-table :data="users" stripe border v-loading="listLoading">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="69px"
          align="center"
          header-align="center"
        ></el-table-column>

        <el-table-column prop="username" label="用户名" width="200px" header-align="center"></el-table-column>
        <el-table-column
          prop="birthday"
          label="出生日期"
          width="100px"
          :formatter="dateFormatter"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column label="性别" width="70px" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 0">女</span>
            <span v-if="scope.row.sex == 1">男</span>
            <span v-if="scope.row.sex == 2">保密</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="手机号"
          width="120px"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="email" label="邮箱" width="150px" header-align="center"></el-table-column>
        <el-table-column prop="address" label="地址" header-align="center"></el-table-column>
        <el-table-column label="用户来源" width="160px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.origin.trim() == 'register'" type="primary">注册用户</el-tag>
            <el-tag v-if="scope.row.origin.trim() == 'phone'" type="primary">手机号快捷注册用户</el-tag>
            <el-tag v-if="scope.row.origin.trim() == 'github'" type="primary">github授权用户</el-tag>
            <el-tag v-if="scope.row.origin.trim() == 'gitee'" type="primary">gitee授权用户</el-tag>
            <el-tag v-if="scope.row.origin.trim() == 'wechat'" type="wechat">微信授权用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="修改角色" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="修改角色"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="roleModifyPre(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :data="allRoles">
        <el-checkbox-group v-model="roles">
          <el-checkbox
            style="display:block;"
            v-for="role in allRoles"
            :key="role.id"
            :label="role.id"
          >{{role.description}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="roleModify">修 改</el-button>
        <el-button type="info" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "userMgmt",
  data() {
    return {
      listLoading: false,
      pageNo: 1,
      pageSize: 10,
      totalElements: 0,

      usernameQry: "",
      username: "",
      users: [],

      dialogVisible: false,

      allRoles: [],
      roles: []
    };
  },
  mounted() {
    this.queryUsers();
  },
  computed: {
    dialogTitle: function() {
      return "修改用户角色--" + this.username;
    }
  },
  methods: {
    queryUsers: function() {
      this.pageNo = 1;
      this.queryUsersInner();
    },
    queryUsersInner: function() {
      this.listLoading = true;
      this.$api.user
        .queryUsersPage(this.usernameQry, this.pageNo, this.pageSize)
        .then(res => {
          this.listLoading = false;
          if (!res) {
            return;
          }

          this.totalElements = res.body.totalElements;
          this.users = res.body.list;
        });
    },
    dateFormatter: function(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY-MM-DD");
    },
    roleModifyPre: function(row) {
      let username = row.username;
      this.$api.userRole.queryRolesByUsername(username).then(res => {
        if (!res) {
          return;
        }

        this.roles = res.body.havingRolesIds;
        this.allRoles = res.body.allRoles;
        this.username = username;
        this.dialogVisible = true;
      });
    },

    roleModify: function() {
      this.$api.userRole
        .modifyUserRoles({
          username: this.username,
          roles: this.roles
        })
        .then(res => {
          if (!res) {
            return;
          }

          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "用户角色修改成功"
          });
        });
    },

    //点击分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryUsersInner();
    },

    index: function(idx) {
      return idx + 1 + (this.pageNo - 1) * this.pageSize;
    }
  }
};
</script>

<style scoped>
.search_condition_bar {
  padding-top: 10px;
}
.search_result_list {
  margin-top: -8px;
  margin-left: -14px;
}

hr {
  margin-left: -15px;
}

.el-checkbox {
  margin-top: 10px;
}
</style>